$vxp-color-black: #000 !default;
$vxp-color-white: #fff !default;

$vxp-color-primary: #339af0 !default; // $oc-blue-5
$vxp-color-primary-light-1: mix($vxp-color-white, $vxp-color-primary, 10%) !default;
$vxp-color-primary-light-2: mix($vxp-color-white, $vxp-color-primary, 20%) !default;
$vxp-color-primary-dark-1: mix($vxp-color-black, $vxp-color-primary, 10%) !default;
$vxp-color-primary-dark-2: mix($vxp-color-black, $vxp-color-primary, 20%) !default;

$vxp-color-info: #3bc9db !default; // $oc-cyan-4
$vxp-color-info-light-1: mix($vxp-color-white, $vxp-color-info, 10%) !default;
$vxp-color-info-light-2: mix($vxp-color-white, $vxp-color-info, 20%) !default;
$vxp-color-info-dark-1: mix($vxp-color-black, $vxp-color-info, 10%) !default;
$vxp-color-info-dark-2: mix($vxp-color-black, $vxp-color-info, 20%) !default;

$vxp-color-success: #20c997 !default; // $oc-teal-5
$vxp-color-success-light-1: mix($vxp-color-white, $vxp-color-success, 10%) !default;
$vxp-color-success-light-2: mix($vxp-color-white, $vxp-color-success, 20%) !default;
$vxp-color-success-dark-1: mix($vxp-color-black, $vxp-color-success, 10%) !default;
$vxp-color-success-dark-2: mix($vxp-color-black, $vxp-color-success, 20%) !default;

$vxp-color-warning: #fab005 !default; // $oc-yellow-6
$vxp-color-warning-light-1: mix($vxp-color-white, $vxp-color-warning, 10%) !default;
$vxp-color-warning-light-2: mix($vxp-color-white, $vxp-color-warning, 20%) !default;
$vxp-color-warning-dark-1: mix($vxp-color-black, $vxp-color-warning, 10%) !default;
$vxp-color-warning-dark-2: mix($vxp-color-black, $vxp-color-warning, 20%) !default;

$vxp-color-error: #f03e3e !default; // $oc-red-7
$vxp-color-error-light-1: mix($vxp-color-white, $vxp-color-error, 10%) !default;
$vxp-color-error-light-2: mix($vxp-color-white, $vxp-color-error, 20%) !default;
$vxp-color-error-dark-1: mix($vxp-color-black, $vxp-color-error, 10%) !default;
$vxp-color-error-dark-2: mix($vxp-color-black, $vxp-color-error, 20%) !default;

$vxp-color-content-primary: #212529 !default; // $oc-gray-9
$vxp-color-content-normal: #495057 !default; // $oc-gray-7
$vxp-color-content-secondary: #868e96 !default; // $oc-gray-6
$vxp-color-content-disabled: #adb5bd !default; // $oc-gray-5
$vxp-color-content-placeholder: #ced4da !default; // $oc-gray-4
$vxp-color-content-humble: #dee2e6 !default; // $oc-gray-3
$vxp-color-content-reverse: $vxp-color-white !default;

$vxp-color-border: #ced4da !default; // $oc-gray-4
$vxp-color-border-light-1: #dee2e6 !default; // $oc-gray-3
$vxp-color-border-light-2: #e9ecef !default; // $oc-gray-2
$vxp-color-border-dark-1: #adb5bd !default; // $oc-gray-5
$vxp-color-border-dark-2: #868e96 !default; // $oc-gray-6

// 需要填充的元素的底色
$vxp-color-fill: $vxp-color-white !default;
// 填充了颜色的元素禁用时的填充
$vxp-color-fill-disabled: #dee2e6 !default; // $oc-gray-3
// 填充底色元素 hover 状态的填充
$vxp-color-fill-hover: #e9ecef !default; // $oc-gray-2
// 需要简单区分填充的元素的底色
$vxp-color-fill-background: #f8f9fa !default; // $oc-gray-0
// 需要填充的元素的反色
$vxp-color-fill-reverse: #212529 !default;

$vxp-font-size: 0.875rem !default;
$vxp-font-size-primary: 1.15em !default;
$vxp-font-size-secondary: 0.85em !default;
$vxp-line-height: 1.5 !default;
$vxp-line-height-secondary: 1 !default;

$vxp-border-width: 1px !default;
$vxp-border-style: solid !default;
$vxp-border-appearance: $vxp-border-width $vxp-border-style !default;
$vxp-border-base: $vxp-border-appearance $vxp-color-border !default;

$vxp-border-radius-base: 4px !default;
$vxp-border-radius-large: 6px !default;
$vxp-border-radius-small: 2px !default;

$vxp-box-shadow-x-offset: 0 !default;
$vxp-box-shadow-y-offset: 0 !default;
$vxp-box-shadow-blur: 4px !default;
$vxp-box-shadow-appearance: $vxp-box-shadow-x-offset $vxp-box-shadow-y-offset $vxp-box-shadow-blur !default;
$vxp-box-shadow-border-appearance: 0 0 0 1px !default;
$vxp-box-shadow-fouced-appearance: 0 0 0 2px !default;
$vxp-box-shadow-base: $vxp-box-shadow-appearance $vxp-color-border !default;

$vxp-transition-duration: 250ms !default;
$vxp-transition-timing-function: ease !default;
$vxp-transition-base: $vxp-transition-duration $vxp-transition-timing-function !default;
$vxp-transition-color-base: color $vxp-transition-base !default;
$vxp-transition-background-base: background-color $vxp-transition-base !default;
$vxp-transition-border-base: border-color $vxp-transition-base !default;
$vxp-transition-box-shadow-base: box-shadow $vxp-transition-base !default;
$vxp-transition-opacity-base: opacity $vxp-transition-base !default;
$vxp-transition-transform-base: transform $vxp-transition-base !default;

$vxp-z-index-popper: 1000 !default;
$vxp-z-index-masker: 1500 !default;
$vxp-z-index-popup: 2000 !default;

$vxp-break-point-sm: 576px !default;
$vxp-break-point-md: 768px !default;
$vxp-break-point-lg: 992px !default;
$vxp-break-point-xl: 1200px !default;
$vxp-break-point-xxl: 1600px !default;

$vxp-break-point-map: (
  xs: (
    max-width: $vxp-break-point-sm - 0.02px
  ),
  sm: (
    min-width: $vxp-break-point-sm
  ),
  md: (
    min-width: $vxp-break-point-md
  ),
  lg: (
    min-width: $vxp-break-point-lg
  ),
  xl: (
    min-width: $vxp-break-point-xl
  ),
  xxl: (
    min-width: $vxp-break-point-xxl
  )
);

// 组件的具体样式变量

// button
// ------------------------------------------
$vxp-button-color: $vxp-color-content-normal !default;
$vxp-button-color-hover: $vxp-color-primary-light-2 !default;
$vxp-button-color-active: $vxp-color-primary-dark-1 !default;
$vxp-button-color-disabled: $vxp-color-content-disabled !default;

$vxp-button-color-bg: $vxp-color-fill !default;
$vxp-button-color-bg-hover: $vxp-button-color-bg !default;
$vxp-button-color-bg-active: $vxp-button-color-bg !default;
$vxp-button-color-bg-disabled: $vxp-color-fill-background !default;

$vxp-button-color-border: $vxp-color-border !default;
$vxp-button-color-border-hover: $vxp-color-primary-light-2 !default;
$vxp-button-color-border-active: $vxp-color-primary-dark-1 !default;
$vxp-button-color-border-disabled: $vxp-color-border !default;

$vxp-button-color-ghost: $vxp-color-content-reverse !default;
$vxp-button-color-hover-ghost: $vxp-color-primary !default;
$vxp-button-color-active-ghost: $vxp-color-primary !default;
$vxp-button-color-disabled-ghost: mix($vxp-color-black, $vxp-color-content-reverse, 15%) !default;

$vxp-button-color-bg-ghost: transparent !default;
$vxp-button-color-bg-hover-ghost: $vxp-button-color-bg-ghost !default;
$vxp-button-color-bg-active-ghost: $vxp-button-color-bg-ghost !default;
$vxp-button-color-bg-disabled-ghost: $vxp-button-color-bg-ghost !default;

$vxp-button-color-border-ghost: $vxp-color-fill !default;
$vxp-button-color-border-hover-ghost: $vxp-color-primary !default;
$vxp-button-color-border-active-ghost: $vxp-color-primary !default;
$vxp-button-color-border-disabled-ghost: $vxp-color-fill-disabled !default;

$vxp-button-color-types: $vxp-color-content-reverse !default;
$vxp-button-color-hover-types: $vxp-button-color-types !default;
$vxp-button-color-active-types: $vxp-button-color-types !default;
$vxp-button-color-disabled-types: $vxp-color-content-disabled !default;

$vxp-button-color-bg-disabled-types: $vxp-color-fill-background !default;
$vxp-button-color-border-disabled-types: $vxp-color-border !default;

$vxp-button-color-active-types-simple: $vxp-color-content-reverse !default;
$vxp-button-color-disabled-types-simple: $vxp-color-fill-disabled !default;
$vxp-button-color-bg-disabled-types-simple: $vxp-color-fill-background !default;
$vxp-button-color-border-disabled-types-simple: $vxp-color-border !default;

$vxp-button-color-disabled-types-ghost: $vxp-button-color-disabled-ghost !default;

$vxp-button-color-bg-types-ghost: transparent !default;
$vxp-button-color-bg-hover-types-ghost: rgba($vxp-color-fill-background, 0.2) !default;
$vxp-button-color-bg-active-types-ghost: rgba($vxp-color-fill-background, 0.3) !default;
$vxp-button-color-bg-disabled-types-ghost: $vxp-button-color-bg-types-ghost !default;

$vxp-button-color-border-disabled-types-ghost: $vxp-color-fill-disabled !default;

$vxp-button-type-colors-primary: $vxp-color-primary $vxp-color-primary-light-2
  $vxp-color-primary-dark-1 !default;
$vxp-button-type-colors-info: $vxp-color-info $vxp-color-info-light-2 $vxp-color-info-dark-1 !default;
$vxp-button-type-colors-success: $vxp-color-success $vxp-color-success-light-2
  $vxp-color-success-dark-1 !default;
$vxp-button-type-colors-warning: $vxp-color-warning $vxp-color-warning-light-2
  $vxp-color-warning-dark-1 !default;
$vxp-button-type-colors-error: $vxp-color-error $vxp-color-error-light-2 $vxp-color-error-dark-1 !default;

$vxp-button-type-colors-map: (
  primary: $vxp-button-type-colors-primary,
  info: $vxp-button-type-colors-info,
  success: $vxp-button-type-colors-success,
  warning: $vxp-button-type-colors-warning,
  error: $vxp-button-type-colors-error
);

$vxp-button-color-pulse: $vxp-color-primary-light-2 !default;

$vxp-button-border: $vxp-border-appearance $vxp-button-color-border !default;

$vxp-button-border-radius: $vxp-border-radius-base !default;

// checkbox
// ------------------------------------------
$vxp-checkbox-color-checked-label: $vxp-color-primary !default;
$vxp-checkbox-color-disabled-label: $vxp-color-content-disabled !default;

$vxp-checkbox-color-border: $vxp-color-border !default;
$vxp-checkbox-color-border-hover: $vxp-color-primary !default;
$vxp-checkbox-color-border-checked: $vxp-color-primary !default;
$vxp-checkbox-color-border-disabled: $vxp-color-fill-disabled !default;

$vxp-checkbox-color-bg-signal: $vxp-color-fill !default;
$vxp-checkbox-color-bg-checked-signal: $vxp-color-primary !default;
$vxp-checkbox-color-bg-disabled-signal: $vxp-color-fill-background !default;

$vxp-checkbox-color-border-signal-after: $vxp-color-white !default;

$vxp-checkbox-border: $vxp-border-appearance $vxp-checkbox-color-border !default;
$vxp-checkbox-border-radius: $vxp-border-radius-base !default;
$vxp-checkbox-border-radius-signal: $vxp-border-radius-small !default;

// drawer
// ------------------------------------------
$vxp-drawer-color-bg: $vxp-color-fill !default;
$vxp-drawer-color-title: $vxp-color-content-primary !default;
$vxp-drawer-color-title-divider: $vxp-color-border-light-2 !default;
$vxp-drawer-color-close: $vxp-color-content-placeholder !default;
$vxp-drawer-color-close-hover: $vxp-color-content-normal !default;

$vxp-drawer-color-bg-handler-hover: rgba($vxp-color-black, 0.15) !default;

$vxp-drawer-handler-length: 5px !default;

$vxp-drawer-title-font-size: $vxp-font-size-primary !default;
$vxp-drawer-title-divider: $vxp-border-appearance $vxp-drawer-color-title-divider;

// input
// ------------------------------------------
$vxp-input-color-bg: $vxp-color-fill !default;
$vxp-input-color-bg-disabled: mix($vxp-color-white, $vxp-color-fill-disabled, 70%) !default;
$vxp-input-color-border: $vxp-color-border !default;
$vxp-input-color-border-hover: $vxp-color-primary-light-1 !default;
$vxp-input-color-border-focus: $vxp-input-color-border-hover !default;
// success
$vxp-input-color-border-success-hover: $vxp-color-success-light-1 !default;
$vxp-input-color-border-success-focus: $vxp-input-color-border-success-hover !default;
// error
$vxp-input-color-border-error-hover: $vxp-color-error-light-1 !default;
$vxp-input-color-border-error-focus: $vxp-input-color-border-error-hover !default;
//warning
$vxp-input-color-border-warning-hover: $vxp-color-warning-light-1 !default;
$vxp-input-color-border-warning-focus: $vxp-input-color-border-warning-hover !default;

$vxp-input-color-control: $vxp-color-content-normal !default;

$vxp-input-color-icon: $vxp-color-content-secondary !default;
$vxp-input-color-icon-hover: $vxp-color-primary !default;

$vxp-input-color-bg-before: $vxp-color-fill-background !default;
$vxp-input-color-bg-after: $vxp-color-fill-background !default;

$vxp-input-line-height: $vxp-line-height !default;
$vxp-input-border: $vxp-border-appearance $vxp-input-color-border !default;
$vxp-input-border-radius: $vxp-border-radius-base !default;
$vxp-input-shadow-focus: $vxp-box-shadow-fouced-appearance rgba($vxp-color-primary, 0.2) !default;
// success
$vxp-input-shadow-success-focus: $vxp-box-shadow-fouced-appearance rgba($vxp-color-success, 0.2) !default;
// error
$vxp-input-shadow-error-focus: $vxp-box-shadow-fouced-appearance rgba($vxp-color-error, 0.2) !default;
//warning
$vxp-input-shadow-warning-focus: $vxp-box-shadow-fouced-appearance rgba($vxp-color-warning, 0.2) !default;

$vxp-input-font-size-count: $vxp-font-size-secondary !default;
$vxp-input-line-height-count: $vxp-line-height-secondary !default;

// menu
// ------------------------------------------
$vxp-menu-color-icon: $vxp-color-content-secondary !default;
$vxp-menu-color-arrow: $vxp-menu-color-icon !default;
$vxp-menu-color-label-hover: $vxp-color-primary !default;
$vxp-menu-color-label-dark: rgba($vxp-color-content-reverse, 0.65) !default;
$vxp-menu-color-label-visible-dark: $vxp-color-content-reverse !default;
$vxp-menu-color-label-disabled: $vxp-color-content-disabled !default;

$vxp-menu-color-bg-base: $vxp-color-fill !default;
$vxp-menu-color-bg-selected: mix($vxp-color-white, $vxp-color-primary, 85%) !default;
$vxp-menu-color-bg-marker: $vxp-color-primary !default;
$vxp-menu-color-bg-selected-dark: $vxp-color-primary !default;
$vxp-menu-color-bg-dark: $vxp-color-fill-reverse !default;
$vxp-menu-color-bg-list-dark: $vxp-color-black !default;

$vxp-menu-color-border: $vxp-color-border !default;
$vxp-menu-color-divider: $vxp-color-border-light-1 !default;

$vxp-menu-border-base: $vxp-border-appearance $vxp-menu-color-border !default;

// option
// ------------------------------------------
$vxp-option-color: $vxp-color-content-normal !default;
$vxp-option-color-hitting: $vxp-color-primary !default;
$vxp-option-color-selected: $vxp-color-primary !default;
$vxp-option-color-disabled: $vxp-color-fill-disabled !default;

$vxp-option-color-bg: $vxp-color-fill !default;
$vxp-option-color-bg-hover: $vxp-color-fill-hover !default;
$vxp-option-color-bg-selected: $vxp-option-color-bg-hover !default;

$vxp-option-color-divider: $vxp-color-border-light-2 !default;

$vxp-option-divider: $vxp-border-appearance $vxp-option-color-divider !default;

$vxp-option-color-group: $vxp-color-content-secondary !default;
$vxp-option-font-size-group: $vxp-font-size-secondary !default;

// radio
// ------------------------------------------
$vxp-radio-color-border: $vxp-color-border !default;
$vxp-radio-color-hover-border: $vxp-color-primary !default;
$vxp-radio-color-hover-signal: $vxp-color-primary !default;

$vxp-radio-color-checked-border: $vxp-color-primary !default;
$vxp-radio-color-checked-signal: $vxp-color-primary !default;
$vxp-radio-color-checked-label: $vxp-color-primary !default;

$vxp-radio-color-disabled-border: $vxp-color-fill-disabled !default;
$vxp-radio-color-disabled-signal: $vxp-color-fill-disabled !default;
$vxp-radio-color-disabled-label: $vxp-color-content-disabled !default;
$vxp-radio-color-disabled-button: $vxp-color-fill-disabled !default;

$vxp-radio-color-bg-disabled-button: $vxp-color-fill-background !default;

$vxp-radio-border: $vxp-border-appearance $vxp-color-border !default;
$vxp-radio-signal-border: $vxp-radio-border !default;
$vxp-radio-color-shadow-focus: rgba($vxp-color-primary, 0.2) !default;
$vxp-radio-shadow-focus: $vxp-box-shadow-fouced-appearance $vxp-radio-color-shadow-focus !default;

// select
// ------------------------------------------
$vxp-select-color-bg-list: $vxp-color-fill !default;
$vxp-select-border-radius-list: $vxp-border-radius-base !default;
$vxp-select-shadow-list: $vxp-box-shadow-base !default;

$vxp-select-color-bg-option-hover: $vxp-color-fill-hover !default;

// scrollbar
// ------------------------------------------
$vxp-scrollbar-color-bg-bar: mix($vxp-color-white, $vxp-color-primary, 60%) !default;
$vxp-scrollbar-color-bg-track: transparent !default;

// tooltip
// ------------------------------------------
$vxp-tooltip-color-bg-base: $vxp-color-fill !default;
$vxp-tooltip-color-content-base: $vxp-color-content-normal !default;
$vxp-tooltip-color-shadow-base: $vxp-color-border !default;
$vxp-tooltip-shadow-base: $vxp-box-shadow-appearance $vxp-tooltip-color-shadow-base !default;

$vxp-tooltip-color-bg-dark: $vxp-color-fill-reverse !default;
$vxp-tooltip-color-content-dark: $vxp-color-content-reverse !default;
$vxp-tooltip-color-shadow-dark: $vxp-color-fill-reverse !default;
$vxp-tooltip-shadow-dark: none !default;

$vxp-tooltip-border-raduis-base: $vxp-border-radius-base !default;
$vxp-tooltip-arrow-size: 0.5em !default;
